<template>
  <FModal header="职务级别管理" width="1000" ref="refFModal">
    <FPage>
      <template #header>
        <div style="padding: 5px 5px">
          <el-button round type="primary" icon="add" @click="openPositionLevelEditModal">新建</el-button>
          <el-button round type="warning" icon="remove" @click="removePositionLevel"
                     :disabled="!removeAble">删除
          </el-button>
          <el-button round icon="copy" @click="copyGroupPositionLevel">
            复制集团职务级别
          </el-button>
        </div>
      </template>

      <div class="position-level-manager-body">
        <el-table height="100%" border stripe :default-sort="sortConfig" @row-click="rowClick"
                  :data="dataSource" @sort-change="sortChange" @selection-change="selectionChange"
                  v-loading="loading">
          <el-table-column type="selection" width="40"/>
          <el-table-column show-overflow-tooltip sortable prop="positionLevelName" label="职务级别名称"/>
          <el-table-column show-overflow-tooltip sortable prop="positionLevel" label="职务级别序号"/>
          <el-table-column show-overflow-tooltip sortable prop="positionLevelCode" label="职务级别编码"/>
          <el-table-column show-overflow-tooltip sortable prop="positionLevelStatus" label="状态">
            <template #default="{row}">
              <SystemDict dict-code="positionLevelStatus"
                          :disabled="true" v-model="row.positionLevelStatus"/>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip sortable prop="sort" label="排序"/>
          <el-table-column show-overflow-tooltip sortable prop="positionLevelDesc" label="描述"/>
        </el-table>
      </div>

      <template #footer>
        <div style="padding: 5px; display: flex; justify-content: end">
          <el-pagination
              v-model:current-page="pagination.current"
              v-model:page-size="pagination.size"
              :page-sizes="pageOptions"
              background layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total" small
              @size-change="search"
              @current-change="pageChange"
          />
        </div>
      </template>
    </FPage>
    <template #footer>
      <el-button icon="close" round type="warning" @click="close">关闭</el-button>
    </template>
  </FModal>
  <PositionLevelEditModal @reloadPositionLevel="reloadPositionLevel" ref="refPositionLevelEditModal"/>
  <CopyGroupPositionLevelModal @copyedGroupPositionLevels="copyedGroupPositionLevels"
                               ref="refCopyGroupPositionLevelModal"/>
</template>
<script setup>
import FModal from '@/components/FModal/index.vue';
import {computed, shallowRef} from 'vue';
import {real} from '@/utils/CommonUtils';
import FPage from '@/components/layout/FPage.vue';
import TableSearchUtils from '@/utils/TableSearchUtils';
import SystemDict from '@/components/SystemDict/index.vue';
import {deleteAction, getAction} from '@/request/BaseRequest';
import PositionLevelEditModal from '@/views/system/UnitManagement/PositionLevelManagerModal/PositionLevelEditModal.vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import CopyGroupPositionLevelModal from '@/views/system/UnitManagement/CopyGroupPositionLevelModal/index.vue';

const refFModal = shallowRef();
const refPositionLevelEditModal = shallowRef();
const refCopyGroupPositionLevelModal = shallowRef();
const searchParams = {};
let unitData = undefined;
const searchForm = {
  value: {
    validate(callback) {
      callback(true);
    },
  }
};

function setData(_unitData) {
  unitData = real(_unitData);
  refFModal.value.open();
  search();
}

function copyGroupPositionLevel() {
  refCopyGroupPositionLevelModal.value.setData(unitData);
}

function removePositionLevel() {
  let id = real(selectedRows)[0].id;
  loading.value = true;
  getAction("/sys/positionLevel/canRemove", {id}).then(data => {
    loading.value = false;
    if (data.success) {
      let result = data.result;
      if (result.canRemove) {
        ElMessageBox.confirm('删除后不可恢复, 确定删除吗', '确定删除?', {
          draggable: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          doRemove(id);
        }).catch(() => {
        });
      } else {
        ElMessage({
          message: result.message,
          type: 'warning',
        });
      }
    }
  });
}

function doRemove(id) {
  loading.value = true;
  deleteAction('/sys/positionLevel/remove',
      {id}).then(data => {
    loading.value = false;
    if (data.success) {
      search(true);
    }
  });
}

const removeAble = computed(() => {
  try {
    return real(selectedRows).length === 1;
  } catch (e) {
  }
  return false;
});

function close() {
  refFModal.value.close();
}

function copyedGroupPositionLevels() {
  search(true);
}

function reloadPositionLevel() {
  search(true);
}

function openPositionLevelEditModal() {
  refPositionLevelEditModal.value.setData(real(unitData));
}

function doSearch(params) {
  loading.value = true;
  params.unitId = unitData.id;
  getAction('/sys/positionLevel/loadUnitPositionLevel', params).then(data => {
    loading.value = false;
    if (data.success) {
      setSearchResult(data.result);
    }
  });
}

function onRowClick(row) {
  refPositionLevelEditModal.value.setData(real(unitData), row);
}

function onSelection() {

}

const {
  loading, rowClick, search, selectionChange, setSearchResult, pageOptions, pageChange,
  sortChange, dataSource, resetQueryParams, sortConfig, selectedRows, pagination
} = TableSearchUtils({
  refForm: searchForm,
  doSearch,
  defaultSortConfig: {
    prop: 'sort',
    order: 'ascending',
  },
  searchParams,
  selectionChange: onSelection,
  rowClick: onRowClick
});

defineExpose({
  setData
});
</script>
<script>
export default {
  name: 'PositionLevelManagerModal'
};
</script>
<style>
.f-modal-body .position-level-manager-body {
  height: 500px;
  overflow: auto;
}

.f-modal-fullscreen-body .position-level-manager-body {
  height: 100%;
  overflow: auto;
}

.position-level-manager-body {
  height: 100%;
  overflow: auto;
  background: white;
}
</style>
